// 先从本地存储中取出cartlist对应的数据并转成js数据类型
// 如果没有 返回null  如果返回null 把数组直接赋值给carlist
var carList = JSON.parse(window.localStorage.getItem('cartlist')) || [
    {id:111222,status:false,pic:'https://img12.360buyimg.com/n0/s80x80_jfs/t1/138056/29/34511/148571/643a54bfF4ed81ff4/391f9ae88ac3d1f4.jpg.dpg',name:'大号水枪双头喷射高压抽拉式滋水枪户外',pric:67.52,number:3,total:16},
    {id:333444,status:true,pic:'https://img20.360buyimg.com/n0/s80x80_jfs/t1/61708/7/21542/186039/6309c658E5659f9e1/0ff570b974aa6cc5.jpg.dpg',name:'酷盟卡车神魔幻元珠魔幻对决萌卡蒙卡变形机器人',pric:65.76,number:2,total:9},
    {id:555666,status:false,pic:'https://img30.360buyimg.com/n0/s80x80_jfs/t1/183665/30/16909/160865/62b00e4aEbf999606/61e1f88f24c76e08.jpg.dpg',name:'水泥搅拌车机玩具男孩混凝土罐车',pric:299.1,number:5,total:23},
    {id:777888,status:true,pic:'https://img11.360buyimg.com/n0/s80x80_jfs/t1/206142/15/20903/233542/62569cf8E5240b395/5d8d492bde80d6d5.jpg.dpg',name:'暴龙战车X龙装战甲重装坦克磁锋航天飞机',pric:284.0,number:9,total:5}
];
// 获取父元素 数据要渲染到该元素的标签内部 
var box = document.getElementsByClassName('content')[0];

// 打开页面 渲染数据
bindHTML();

// 用户操作 数据发生改变  需要重新渲染数据 
// 这个方法被多次调用  
function bindHTML(){

   // 处理数据  
   // 总件数  总价格   选中多少商品 不能直接拿到 需要通过处理数据得到 

   // 前提 产品选中  
   // 选中了多少件商品   总件数    总价格  

   var totalSelect=0,totalNum=0,totalPrice=0;
   carList.forEach(function(item){
      if(item.status){ // 只有产品被选中才得到结果
        totalSelect++; 
        totalNum += item.number;
        totalPrice += item.number * item.pric;
      }
   })

    //拼接字符串  
    var str = `
    <div class="top">
      <input type="checkbox" class="toggleAll" ${totalSelect == carList.length?"checked":""} > 全选
    </div>
    <ul>`

   //  上面是 头部 字符串
   //  下面是每个产品遍历后拼接起来的数据 也就是中间部分内容
    str += carList.reduce(function(prev,item){
      return prev + 
      `
      <li>
      <div class="status">
        <input data-id="${item.id}" type="checkbox" ${item.status ?"checked":""} class="toggle">
      </div>
      <div class="show">
        <img src="${item.pic}" alt="">
      </div>
      <div class="title">
      ${item.name}
      </div>
      <div class="price">
        ￥ ${item.pric.toFixed(1)}
      </div>
      <div class="number">
        <button class="subbtn" data-id="${item.id}">-</button>
        <input type="text" value="${item.number}">
        <button class="addbtn" data-id="${item.id}">+</button>
      </div>
      <div class="sub">
        ￥ ${(item.pric * item.number).toFixed(1)}
      </div>
      <div class="destory">
        <button class="del" data-id="${item.id}">删除</button>
      </div>
    </li>
      `
    },'')
   
  // 下面是底部
   str += `
    </ul>
    <div class="bottom">
      <div class="totalNum">
        总件数 : ${totalNum}
      </div>
      <div class="btns">
        <button class="clear">清空购物车</button>
        <button class="buy" data-price="${totalPrice}" ${totalSelect==0?"disabled":""}>去结算</button>
        <button class="removeComplete" ${totalSelect==0?"disabled":""}>删除所有已选中</button>
      </div>
      <div class="totalPrice">
        总价格 : ￥${totalPrice.toFixed(1)} <span></span>
      </div>
    </div> 
    `

    // console.log(str);
    box.innerHTML = str;


    // 将数据保存到本次存储 
    window.localStorage.setItem('cartlist',JSON.stringify(carList))

}


// 各种事件操作 
// 全选  点击每个商品复选框  增加数量  减少数量  删除每个商品  清空购物车
// 去结算  删除所有已经选中 
// 上面的操作会修改数据  比如选中 修改了status + number增加 - number减少
// 修改完数据要保存  
// 把修改后的数据渲染到页面上  
// 委托上面元素的父亲  父亲通过事件目标找到他们   
// 事件目标:
//   事件对象.target
box.onclick = function(e){
  e = e || window.event; // 获取事件对象 
  // 下面每个操作 都要调用bindHTML()
  // 全选 
  // console.log(e.target)获取的是元素
  // 判断元素的类名是否是toggleAll
  if(e.target.className === 'toggleAll'){
    //  alert('您点击了全选')
    // 如果用户点击了全选 每个产品的status 要发生变化 变成true或者false  
    carList.forEach(function(item){
        item.status = e.target.checked;
    });

    // 上面修改了数据 
    // 重新渲染到页面上 
    bindHTML()

  }


  // 清空购物车 
  if(e.target.className === 'clear'){
    //  alert('您点的是清空购物车')
    carList.length = 0; // 把数组所有的项全部清除
    bindHTML();
  }

  // 去结算 
  if(e.target.className === 'buy'){
    //  alert('您点的是结算按钮')
    console.log('总价是:',e.target.dataset.price-0,"元");
  }

  // 删除所有已经选中 
  if(e.target.className === 'removeComplete'){
    // alert('您点的是删除所有已经选中');
    // 方案1  原生操作删除数组指定的元素  
    //  防止数组塌陷  
    // for(var i=0;i<carList.length;i++){
    //     if(carList[i].status === true){
    //         carList.splice(i,1);
    //         i--;
    //     }
    // }

    // 方案2:
    // filter 筛选符合条件的元素 
    carList=carList.filter(function(item){
      return !item.status
    })
    bindHTML();
  }

  // + 
  if(e.target.className === 'addbtn'){
    //  alert('您点的是+');
    //  alert(e.target.dataset.id);
    // 根据点击+ 的自定义属性 data-id的值 
    // 取数据库找到是哪个商品 
    // 让这个商品的number++
    var info = carList.find(function(item){
      return item.id == e.target.dataset.id
  })

  // console.log(info);
  if(info.number>info.total){
      return
  }
  info.number++;
  // 因为 + 修改了数据  需要保存并且重新渲染数据
  bindHTML();
  }

  // - 
  if(e.target.className === 'subbtn'){
    // alert('您点的是-');
    // alert(e.target.dataset.id);
    // 渲染的时候 每个li的- 都增加一个属性id 
    // 点击 拿到这个id 
    // 通过id  去数据库查看 是哪个产品的id 返回这个产品

    // 让这个产品的number -- 
    var info = carList.find(function(item){
        return item.id == e.target.dataset.id
    })

    // console.log(info);
    if(info.number<=1){
        return
    }
    info.number--;

    bindHTML()
 }

  // 每个产品复选框  
  if(e.target.className == "toggle"){
    // alert('您正在勾选每个产品前面的复选框')
    // alert(e.target.dataset.id);
    var info = carList.find(function(item){
        return item.id === e.target.dataset.id-0
    })

    info.status = !info.status;

    bindHTML();
  }

  // 删除 
  if(e.target.className == "del"){
    // alert('您正在点击删除')
    // alert(e.target.dataset.id);
    var info = carList.find(function(item){
        return item.id === e.target.dataset.id-0
    })

  //   var index = carList.findIndex(function(item){
  //     return item.id === e.target.dataset.id-0
  // })

    if(!window.confirm(`你确定要删除${info.name}么`)){
      return
    }


    // carList.splice(index,1)
    carList = carList.filter(function(item){
      return item.id !== e.target.dataset.id-0
    });
    bindHTML();
  }
}